<template>
  <div class="shape-box">
    <slot />
    <!-- 锚点 -->
    <template v-if="!hiddenPoint">
      <div
        v-for="(point, index) in select ? pointList : []"
        :key="index"
        :class="`shape-point ${point}`"
        :style="usePointStyle(point, index, item.attr, cursorResize)"
        @mousedown="MousePointHandle($event, point, item.attr)"
      />
    </template>

    <!-- 选中 -->
    <div
      class="shape-modal"
      :style="useSizeStyle(item.attr)"
    >
      <div
        class="shape-modal-select"
        :class="{ active: select }"
      />
      <div
        class="shape-modal-change"
        :class="{ selectActive: select, hoverActive: hover }"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import styleMixin from '../../mixins/style'
import dragMixin from '../../mixins/drag'
export default {
  mixins: [styleMixin, dragMixin],
  props: {
    item: {
      type: Object,
      required: true
    },
    hiddenPoint: {
      type: Boolean,
      required: false
    }
  },
  computed: {
    ...mapGetters(['editCanvas', 'targetChart']),
    // 计算当前选中目标
    hover () {
      const { isDrag } = this.editCanvas
      if (isDrag) return false

      if (this.item.status.lock) return false
      return this.item.id === this.targetChart.hoverId
    },
    // 兼容多值场景
    select () {
      const { id } = this.item
      return this.targetChart.selectId.find(item => item == id)
    }
  },
  data () {
    return {
      // 锚点
      pointList: ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb'],
      // 光标朝向
      cursorResize: ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']
    }
  }
}
</script>

<style lang="scss" scoped>
.shape-box {
  position: absolute;
  cursor: move;

  &.lock {
    cursor: default !important;
  }

  &.hide {
    display: none;
  }

  /* 锚点 */
  .shape-point {
    z-index: 1;
    position: absolute;
    width: 7px;
    height: 7px;
    border: 3px solid #51d6a9;
    border-radius: 5px;
    background-color: #fff;
    transform: translate(-40%, -30%);
    &.t {
      width: 30px;
      transform: translate(-50%, -50%);
    }
    &.b {
      width: 30px;
      transform: translate(-50%, -30%);
    }
    &.l,
    &.r {
      height: 30px;
    }
    &.r {
      transform: translate(-20%, -50%);
    }
    &.l {
      transform: translate(-45%, -50%);
    }
    &.rt,
    &.rb {
      transform: translate(-30%, -30%);
    }
  }
  /* 选中 */
  .shape-modal {
    position: absolute;
    top: 0;
    left: 0;

    .shape-modal-select,
    .shape-modal-change {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }

    .shape-modal-select {
      opacity: 0.1;
      top: 2px;
      left: 2px;
      &.active {
        background-color: #51d6a9;
      }
    }
    .shape-modal-change {
      border: 2px solid rgba(0, 0, 0, 0);
      &.selectActive,
      &.hoverActive {
        border-color: #51d6a9;
        border-width: 2px;
      }
      &.hoverActive {
        border-style: dotted;
      }
      &.selectActive {
        border-style: solid;
      }
    }
  }
}
</style>